import React, {Fragment, useState} from 'react'
import DocumentTitle from "react-document-title";
import {Button, Checkbox, Form, Input, message} from "antd";
import {LockOutlined, UserOutlined} from '@ant-design/icons';
import {useNavigate} from "react-router-dom";

import './index.css'
import {useDispatch} from 'react-redux';
import {login} from "../../store/actions";
import {AnyAction} from "redux";
import {ThunkDispatch} from "redux-thunk";
import ForgetPwdModal from "../modal/ForgetPwdModal";

const initialState = {showCreateTaskModal: false,};

function Login() {
    const [form] = Form.useForm();
    let navigate = useNavigate();
    const [loading, setLoading] = useState(false);
    const [state, setState] = useState(initialState)

    type State = { a: object }; // your state type
    type AppDispatch = ThunkDispatch<State, any, AnyAction>;
    const dispatch: AppDispatch = useDispatch();

    function handleSubmit() {
        setLoading(true);
        const values = form.getFieldsValue();
        values.code = '';
        values.verifyToken = '';
        console.log(values);
        debugger;
        dispatch(login(values)).then((res: any) => {
            console.log(res);
            debugger;
            const success = res.data.success;
            const msg = res.data.message;
            setLoading(false);
            if (success) {
                message.info("登录成功！");
                navigate("/app", {replace: true});
            } else {
                message.info(msg);
            }
        }).finally(()=>{
            setLoading(false);
        });

    }

    function showForgotModal() {
        setState({showCreateTaskModal: true})
    }

    function handleOnSuccess() {
        setState({showCreateTaskModal: false})
    };

    function hideForgetPwdModal() {
        setState({showCreateTaskModal: false})
    }

    return (
        <Fragment>
            <DocumentTitle title={"登录"}>
                <div className="login">
                    <div className="login-box">
                        <div className="login-logo">
                            <span>React Admin</span>

                        </div>

                        <Form
                            form={form}
                            name="normal_login"
                            className="login-form"
                            initialValues={{remember: true}}
                            onFinish={handleSubmit}>
                            <Form.Item
                                name="username"
                                rules={[{required: true, message: '用户名不能为空!'}]}
                            >
                                <Input prefix={<UserOutlined className="site-form-item-icon"/>}
                                       placeholder="请输入用户名"/>
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[{required: true, message: '密码不能为空!'}]}
                            >
                                <Input
                                    prefix={<LockOutlined className="site-form-item-icon"/>}
                                    type="password"
                                    placeholder="请输入密码"
                                />
                            </Form.Item>
                            <Form.Item>
                                <Form.Item name="remember" valuePropName="checked" noStyle>
                                    <Checkbox>记住我</Checkbox>
                                </Form.Item>

                                <a className="login-form-forgot" onClick={showForgotModal}>
                                    忘记密码？
                                </a>
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" htmlType="submit" className="login-form-button"
                                        loading={loading}
                                >
                                    {loading ? '登 录 中...' : '登 录'}
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>


                </div>
            </DocumentTitle>
            <ForgetPwdModal visible={state.showCreateTaskModal} onSuccess={handleOnSuccess}
                            onCancel={hideForgetPwdModal}/>
        </Fragment>
    );

}

export default Login;
